<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-06-10 22:56:03
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-06-18 23:29:13
 * @FilePath: /chat-ai-plus/src/components/Popup/Popup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE, 
-->
<template>
  <view class="justify_between align-items_center">
    <view class="flex t_left">
      <u-button class="back-btn m_unset" icon="arrow-left" @click="handleBack"></u-button> 
    </view>
    <view class="flex_3 t_center ">
      <view class="h1">
        账号密码登录
      </view>
    </view>
    <view class="flex"></view>
  </view>
  <u-form class="mt_lg" :model="formState" :rules="rules" ref="formRef">
    <u-form-item prop="phoneOrEmail">
      <u-input
        v-model="formState.phoneOrEmail"
        :placeholder="$t('register.form.email.placeholder')"
        prefixIcon="email-fill"
      ></u-input>
    </u-form-item>
    <u-form-item prop="captcha">
      <u-input
        v-model="formState.captcha"
        :placeholder="$t('register.form.verification.placeholder')"
        prefixIcon="search"
      >
        <template #suffix>
          <u-button
            @tap="handleSendCode"
            :text="codeHint"
            :disabled="countdown > 0 || !formState.phoneOrEmail"
             class="input-btn"
          ></u-button>
        </template>
      </u-input>
    </u-form-item>
    <u-form-item prop="password">
      <u-input
      type="password"
        v-model="formState.password"
        :placeholder="$t('register.form.password.placeholder')"
        prefixIcon="lock-fill"
      >
        <template #suffix>
          <u-icon name="eye-off"></u-icon>
        </template>
      </u-input>
    </u-form-item>
    <u-form-item prop="confirmPassword">
      <u-input
        v-model="formState.confirmPassword"
        :placeholder="$t('register.form.confirmPassword.placeholder')"
        prefixIcon="lock-fill"
      >
        <template #suffix>
          <u-icon name="eye-off"></u-icon>
        </template>
      </u-input>
    </u-form-item>
    <u-form-item class="mt_lg">
      <u-button
        type="primary"
        @click="handleSubmit"
        :text="$t('register.form.submit')"
        shape="circle"
      ></u-button>
    </u-form-item>
  </u-form>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useFormState, useAuthCode } from './hooks';

export default defineComponent({
  name: 'Register',

  setup(props,context) {
    const {emit} = context
    const { formRef, formState, rules, handleSubmit } = useFormState(props,context);
    const { countdown, codeHint, handleSendCode } = useAuthCode(formState);

    
    const handleBack = () => {
      emit('back')
    };

    return {
      formRef,
      formState,
      rules,
      handleSubmit,
      countdown,
      codeHint,
      handleSendCode,
      handleBack
    };
  },
});
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';

.back-btn {
   
    width: 32px;
    height: 32px;
    border: none;
    background: none;
  }
</style>
